<html>
<head>
    <meta charset="utf-8">
    <title>{ms:global.name/}</title>
    <#include "head-file.htm" />
    <!--引入vue库-->
    <script type="text/javascript" src="/static/plugins/vue/2.6.9/vue.min.js"></script>
    <!--引入element-ui库-->

    <script src="${base}/static/plugins/element-ui/2.15.8/index.min.js"></script>
    <link rel="stylesheet" href="/static/plugins/element-ui/2.15.8/theme-chalk/index.min.css">

    <!--网络请求框架-->
    <script src="/static/plugins/axios/0.18.0/axios.min.js"></script>
    <script src="/static/plugins/qs/6.6.0/qs.min.js"></script>
    <script src="/static/plugins/ms/2.0/ms.umd.js"></script>
    <script src="/static/plugins/ms/2.0/ms-el-form.umd.js"></script>
    <script>
        window.ms.login="{ms:global.host/}mdiyPage/login.do";
    </script>
</head>

<body>

<div id="app" v-cloak>
    <!--表单位置-start-->
    <el-form ref="form" :model="form" :rules="rules" label-position="right" size="large" label-width="120px">
        <el-row :gutter="0" justify="start" align="top">
            <el-col :span="12">
                <el-form-item label="用户名" prop="peopleName">
                    <el-input v-model="form.peopleName" :disabled="false" :readonly="false" :clearable="true" placeholder="请输入用户名">
                    </el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="手机号" prop="peoplePhone">
                    <el-input v-model="form.peoplePhone" :disabled="false" :readonly="false" :clearable="true" placeholder="请输入手机号">
                    </el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="0" justify="start" align="top">
            <el-col :span="12">
                <el-form-item label="密码" prop="peoplePassword">
                    <el-input type="password" :show-password="true" :clearable="true" v-model="form.peoplePassword" :style="{width:'100%'}" :disabled="false" placeholder="请输入密码"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item prop="rePeoplePassword" label="确认密码" class="input">
                    <el-input type="password" v-model="form.rePeoplePassword" :show-password="true" :clearable="true" placeholder="请再次输入新密码">
                    </el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="0" justify="start" align="top">
            <el-col :span="12">
                <el-form-item label="验证码" prop="rand_code" class="input">
                    <el-row :gutter="0" justify="start" align="top">
                        <el-col :span="14">
                            <el-input v-model="form.rand_code" :disabled="false" :readonly="false" :clearable="true" placeholder="请输入验证码">
                            </el-input>
                        </el-col>
                        <el-col :span="10">
                            <div style="display: flex; height: 38px;">
                                <img :src="verifCode" class="code-img" @click="code" style="cursor: pointer" alt="点击换一张" />
                                <div @click="code" style="margin-left: 10px">
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <!--邮箱验证start-->
                <el-form-item label="-邮箱验证码" prop="peopleCode" class="input">
                    <el-row :gutter="0" justify="start" align="top">
                        <el-col :span="13">
                            <el-input v-model="form.peopleCode" :disabled="false" :readonly="false" :clearable="true" placeholder="请输入验证码">
                            </el-input>
                        </el-col>
                        <el-col :span="11">
                            <el-button v-text="sendPeopleCodeMsg" :disabled="sendPeopleCodeDisabled" type="info" plain @click="getPeopleCode" style="width: 100px; padding: 12px 0;margin-left: 10px ">
                            </el-button>
                        </el-col>
                    </el-row>
                </el-form-item>
            </el-col>
        </el-row>
        <el-form-item label=" " class="input">
            <el-button @click="register" type="primary" :loading="saveDisabled">
                {{saveDisabled?'提交中':'立即注册'}}
            </el-button>
            <div>
                <el-link href="/mdiyPage/login.do" :underline="false" icon="el-icon-user">账号登录</el-link>
            </div>
        </el-form-item>
    </el-form>
    <!--表单位置-end-->
</div>
</body>
</html>
<script>
    var validatePass = function(rule, value, callback) {
        if (value !== app.form.peoplePassword) {
            callback(new Error('两次输入密码不一致!'));
        } else {
            callback();
        }
    };
    //百度编辑器默认配置
    var app = new Vue({
        el: '#app',
        watch: {},
        data: {
            //验证码计时
            countdown: 0,
            //发送邮箱验证码按钮
            sendPeopleCodeDisabled: false,
            sendPeopleCodeMsg: "发送验证码",
            saveDisabled: false,
            verifCode: "/code?t=" + new Date().getTime(),
            organizationIdOptions: [{ 'id': '0', 'name': '自由创业者' }],
            puIcon: null,

            //表单数据
            form: {
                rePeoplePassword: "",
                // 用户名
                peopleName: '',
                // 密码
                peoplePassword: '',
                // 手机号
                peoplePhone: '',
                // 邮箱
                peopleMail: '',
                // 真实姓名
                puRealName: '',
                // 生日
                puBirthday: '',
                // 身份证号
                puCard: '',
                // 所属机构
                organizationId: '0',
                // 用户头像
                puIcon: '',
                // 介绍
                introduce: '',
            },
            rules: {
                rePeoplePassword: [{
                    required: true,
                    message: '确认密码不能为空',
                    trigger: 'blur'
                },
                    {
                        min: 6,
                        max: 20,
                        message: '长度在 6 到 20 个字符',
                        trigger: 'blur'
                    },
                    {
                        validator: validatePass,
                        trigger: 'blur'
                    }
                ],
                // 用户名
                peopleName: [{ "required": true, "message": "用户名不能为空" }, {
                    "min": 0,
                    "max": 20,
                    "message": "用户名长度必须为0-20"
                }],
                // 密码
                peoplePassword: [{ "required": true, "message": "密码不能为空" }, {
                    "min": 6,
                    "max": 30,
                    "message": "用户名长度必须为6-30"
                }],
                // 手机号
                peoplePhone: [{ "required": true, "message": "手机号不能为空" }, {
                    "pattern": /^1[34578]\d{9}$/,
                    "message": "手机号格式不匹配"
                }, { "min": 11, "max": 11, "message": "手机号长度必须为11位" }],
                // 所属机构
                organizationId: [{ "required": true, "message": "请选择所属机构" }],
                //邮箱验证start
                rand_code: [
                    { required: true, message: '请输入验证码', trigger: 'blur' },
                    { min: 1, max: 4, message: '长度不能超过4个字符', trigger: 'change' }
                ],
                peopleCode: [
                    { required: true, message: '请输入短信验证码', trigger: 'blur' },
                    { min: 1, max: 6, message: '长度不能超过6个字符', trigger: 'change' }
                ],
                //邮箱验证end

            },
        },
        methods: {
            //邮箱验证start
            //倒计时
            countdownSubtract: function() {
                this.countdown--;
                this.sendPeopleCodeMsg = "重新发送(" + this.countdown + ")";
                if (this.countdown == 0) {
                    this.sendPeopleCodeMsg = "发送验证码";
                    this.sendPeopleCodeDisabled = false;
                    this.countdown = 0;
                    return;
                }
                setTimeout(this.countdownSubtract, 1000);
            },
            //获取图形验证码
            code: function() {
                this.verifCode = "/code?t=" + new Date().getTime();
            },
            //获取邮箱验证码
            getPeopleCode: function() {
                var that = this;
                // 发送邮箱验证码
                if (that.countdown > 0) {
                    return;
                }
                var flag = true;
                this.$refs['form'].validateField(['rand_code', 'peoplePhone'], (Error) => {
                    if (Error) {
                        //执行
                        flag = false;
                    }
                });
                if (flag) {
                    //号码是否存在
                    ms.http.post("/isExists.do", {
                        peoplePhone: that.form.peoplePhone,
                    }).then(function(data) {
                        if (data.result) {
                            that.$notify({
                                title: '失败',
                                message: '该手机号码已绑定',
                                type: 'warning'
                            });
                        } else {
                            //请求手机验证码
                            ms.http.post('/sendCode.do', {
                                receive: that.form.peoplePhone,
                                modelCode: "bindPhone",
                                type: "sms",
                                isSession: true,
                                rand_code: that.form.rand_code,
                            }).then(function(data) {
                                if (data.result) {
                                    that.$notify({
                                        title: '成功',
                                        message: '验证码已发出，请注意查收！',
                                        type: 'success'
                                    });
                                    that.countdown = 60;
                                    that.countdownSubtract();
                                    that.sendPeopleCodeDisabled = true;
                                } else {
                                    if (data.msg) {
                                        that.$notify({
                                            title: '失败',
                                            message: data.msg,
                                            type: 'warning'
                                        });
                                    }
                                    that.code();
                                }
                            })
                        }
                    });
                }
            },
            //邮箱验证end
            //注册
            register: function() {
                var that = this;
                that.$refs.form.validate((valid) => {
                    if (valid) {
                        that.saveDisabled = true;
                        //邮箱验证start
                        ms.http.post("/checkSendCode.do", {
                            receive: that.form.peoplePhone,
                            code: that.form.peopleCode
                        }).then(function(res) {
                            if (!res.result) {
                                that.saveDisabled = false;
                                that.$notify({
                                    title: '失败',
                                    message: res.msg,
                                    type: 'warning'
                                });
                            } else {
                                //邮箱验证end
                                var data = JSON.parse(JSON.stringify(that.form));
                                data.puIcon = that.puIcon;
                                data.puRealName = that.form.peopleName;
                                ms.http.post("/register.do", data).then(function(res) {
                                    if (res.result != true) {
                                        that.saveDisabled = false;
                                        that.$notify({
                                            title: '失败',
                                            message: res.msg,
                                            type: 'warning'
                                        });
                                    } else {
                                        that.$notify({
                                            title: '成功',
                                            message: '注册成功！请等待管理员审核',
                                            type: 'success',
                                            duration: '1000',
                                            onClose: function() {
                                                location.href = '/';
                                            }
                                        });
                                    }
                                })
                            }
                        })
                    }

                });
            },
        },
        created: function() {
            //验证码start
            this.code();
        }
    })
</script>